<template>
    <el-cascader
            v-model="selected"
            ref="select"
            :show-all-levels="showAllLevels"
            :placeholder="placeholder"
            :size="size"
            :collapse-tags="collapseTags"
            :filterable="filterable"
            :clearable="clearable"
            :disabled="disabled"
            :props="nodeConfig"
            :options="options"
            @change="handleSelected" />
</template>

<script>
    export default {
        name: "Cascader",
        props: {
            // 绑定的值
            value: {
                required: true
            },
            // 输入框占位文本
            placeholder: {
                type: String,
                default: '请选择'
            },
            // 大小 [medium/small/mini]
            size: {
                type: String,
                default: ''
            },
            // 禁用
            disabled: {
                type: Boolean,
                default: false
            },
            // 是否可以清除所选内容
            clearable: {
                type: Boolean,
                default: true
            },
            // 搜索
            filterable: {
                type: Boolean,
                default: true
            },
            // 输入框中是否显示选中值的完整路径
            showAllLevels: {
                type: Boolean,
                default: false
            },
            // 多选时是否将选中值按文字的形式展示
            collapseTags: {
                type: Boolean,
                default: true
            },
            options: {
              type: Array,
              default: () => []
            },
            /** props配置选项 */
            // 是否返回由该节点所在的各级菜单的值所组成的数组。若设置 false，则只返回该节点的值
            emitPath: {
                type: Boolean,
                default: false
            },
            // 是否多选
            multiple: {
                type: Boolean,
                default: false
            },
            // 节点展开方式['hover', 'click']
            expandTrigger: {
                type: String,
                default: 'hover'
            },
            // 是否严格的遵守父子节点不互相关联
            checkStrictly: {
                type: Boolean,
                default: false
            },
            // 指定选项的值为选项对象的某个属性值
            customValue: {
                type: String,
                default: 'value'
            },
            // 指定选项标签为选项对象的某个属性值
            customLabel: {
                type: String,
                default: 'label'
            },
            // 指定选项的子选项为选项对象的某个属性值
            customChildren: {
                type: String,
                default: 'children'
            },
            // 指定选项的禁用为选项对象的某个属性值
            customDisabled: {
                type: String,
                default: 'disabled'
            }
        },
        data() {
            return {
                // 节点设置
                nodeConfig: {
                    emitPath: this.emitPath,
                    multiple: this.multiple,
                    expandTrigger: this.expandTrigger,
                    checkStrictly: this.checkStrictly,
                    value: this.customValue,
                    label: this.customLabel,
                    children: this.customChildren,
                    disabled: this.customDisabled
                },
                selected: this.value,
            }
        },
        watch: {
            'value': {
                handler(newVal) {
                    this.selected = newVal
                }
            },
            'selected': {
                handler(newVal, oldVal) {
                    if (newVal !== oldVal) {
                        this.$emit('input', newVal)
                    }
                }
            },
        },
        methods: {
            /** cascader选中事件 */
            handleSelected(val) {
                this.$emit('change', val || '')
            }
        }
    }
</script>

<style scoped>

</style>
